<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    class App extends React.Component{
        state = {
            isShow:true
        }
        changeIsShow(isShow){
            this.setState({isShow});
        }
        render(){
            return (
                <div>
                    <button onClick={this.changeIsShow.bind(this,!this.state.isShow)}>显示与隐藏</button>
                    {
                        this.state.isShow && <Child changeIsShow={this.changeIsShow.bind(this)}></Child>
                    }
                </div>
            )
        }
    }
    class Child extends React.Component{
        render(){
            return (
                <div style={{
                    width:300,
                    height:300,
                    background:"red"
                }}>Child
                    <button onClick={()=>{
                        this.props.changeIsShow(false);
                    }}>隐藏自己</button>

                </div>
            )
        }
    }
    root.render((
        <App></App>
    ))
</script>
</html>